<template>
  当前图案数：{{ sum }}
  <el-row :gutter="20">
    <el-col :span="4">
      基础图案：
      <el-button @click="setNode('rect')">矩形</el-button>
      <el-button @click="setNode('circular')">园</el-button>
      <el-button @click="setNode('line')">线</el-button>
      <el-button @click="loadImage">pic</el-button>

      <hr />

      当前连线类型：{{ connectModel[connectType] }}<br />
      <el-button @click="setConnectType('connectCurve')">曲线</el-button>
      <el-button @click="setConnectType('connectArrowCurveFill')">箭头曲线</el-button>

      <hr />

      自定义图案：
      <el-button @click="drawCanvas('rect')">正方形</el-button>
      <el-button @click="drawCanvas('star')">star</el-button>

      <hr />

      功能按钮：
      <el-button @click="clear">清空画布</el-button>
      <el-button @click="removeNode()">删除</el-button><br />
      缩放：<el-switch v-model="ele.zoom" /><br />
      连线：<el-switch v-model="ele.connect" /><br />
      允许拖拽<el-switch v-model="ele.drag" />

      <hr />

      组合图形:
      <el-button @click="bar">柱状图</el-button>
      <el-button @click="pie">饼图</el-button>

    </el-col>

    <el-col
      :span="16"
      id="canvasEvent"
    >
      <canvas
        id="drawingBoard"
        class="shadow"
        style="margin-top:10px;width: 600px;height: 400px;"
      ></canvas>
    </el-col>
    <el-col :span="4">
      文字内容：<el-input
        v-model="textInfo.text"
        style="width:200px;"
      ></el-input><br />
      文字样式：<el-input
        v-model="textInfo.font"
        style="width:200px;"
        type="string"
      >
        <template #append>12px serif</template>
      </el-input><br />
      文字颜色：<el-input
        v-model="textInfo.fillColor"
        style="width:200px;"
      >
        <template #append>rgba</template>
      </el-input><br />
      文字类型：
      <el-select
        v-model="textInfo.fillType"
        style="width:200px;"
      >
        <el-option
          v-for="(item,index) in [{label:'空心(stroke)',value:'stroke'}, {label:'实心(fill)',value:'fill'}]"
          :key="index"
          :label='item.label'
          :value='item.value'
        ></el-option>
      </el-select><br />
      填充色：<el-input
        v-model="ele.fillColor"
        style="width:200px;"
      >
        <template #append>rgba</template>
      </el-input><br />
      图案类型：
      <el-select
        v-model="ele.fillType"
        style="width:200px;"
      >
        <el-option
          v-for="(item,index) in [{label:'空心(stroke)',value:'stroke'}, {label:'实心(fill)',value:'fill'}]"
          :key="index"
          :label='item.label'
          :value='item.value'
        ></el-option>
      </el-select><br />
      宽度：<br />
      <el-input
        v-model="ele.lineWidth"
        style="width:200px;"
        type="number"
      >
        <template #append>px</template>
      </el-input>
    </el-col>
  </el-row>
  <div class="eleView">
    当前点击的图形：{{ele}}
  </div>
</template>

<script setup>
import {
  init,
  setNode,
  removeNode,
  pie,
  bar,
  clear,
  loadImage,
  drawCanvas,
} from "@/home/common.js";
import { onMounted, ref, watchEffect } from "vue";
import { nodes, imgNode } from "../node-example.js";

const width = 600;
const height = 400;
const defaultStyle = {
  lineWidth: 1,
};

let draw = null;
onMounted(() => {
  draw = init(
    { width: width * 2, height: height * 2, defaultStyle },
    document.getElementById("drawingBoard"),
    getSelectInfo
  );
  load();
  window.Drawing = draw;
});

const connectType = ref("connectCurve");
const connectModel = {
  connectCurve: "曲线",
  connectArrowCurveFill: "箭头曲线",
};
const ele = ref({});
const allEle = ref([]);
const textInfo = ref({}); // 当前选中的图案内的文字
const sum = ref(0);

watchEffect(() => {
  // console.log(123, allEle.value.length);
  sum.value = allEle.value.length;
});

// 获取当前点击的图案信息
const getSelectInfo = (select) => {
  console.log("select node = ", select);
  const { nodes } = draw.getNodes();
  const node = draw.getNode();
  ele.value = node;
  allEle.value = nodes;
  // console.log("allEle", allEle.value);
  textInfo.value = ele.value.textInfo || {};
};

let ruleMap = {
  QAQC_relate: true,
};
const load = () => {
  // // 添加图片
  // let testImg = draw.addNode(imgNode);
  // console.log("testImg = ", testImg);

  nodes.forEach(async (node) => {
    draw.addNode(node);
  });

  draw.addConnect({
    fillColor: "#0081DD",
    lineWidth: 2,
    startInfo: {
      id: "1111",
      pos: 2,
    },
    targetInfo: {
      id: "2222",
      pos: 4,
    },
  });

  draw.addConnect({
    fillColor: "#0081DD",
    lineWidth: 2,
    startInfo: {
      id: "1111",
      pos: 2,
    },
    targetInfo: {
      id: "3333",
      pos: 4,
    },
  });
};
// 设置连线类型
const setConnectType = (type) => {
  draw.setNodeType();
  draw.setConnectType(type);
  connectType.value = type;
};
</script>

<style scoped>
.eleView {
  width: 60%;
  left: 20%;
  position: absolute;
}
</style>